<div class="theme-config">
	<div class="theme-config-box">
		<div class="spin-icon">
			<i class="fa fa-cogs fa-spin"></i>
		</div>
		<div class="skin-setttings">
			<div class="title">Configuration</div>
			<div class="setings-item">
				<span> Collapse menu </span>

				<div class="switch">
					<div class="onoffswitch">
						<input type="checkbox" name="collapsemenu"
							class="onoffswitch-checkbox" id="collapsemenu"> <label
							class="onoffswitch-label" for="collapsemenu"> <span
							class="onoffswitch-inner"></span> <span
							class="onoffswitch-switch"></span>
						</label>
					</div>
				</div>
			</div>
			<div class="setings-item">
				<span> Fixed sidebar </span>

				<div class="switch">
					<div class="onoffswitch">
						<input type="checkbox" name="fixedsidebar"
							class="onoffswitch-checkbox" id="fixedsidebar"> <label
							class="onoffswitch-label" for="fixedsidebar"> <span
							class="onoffswitch-inner"></span> <span
							class="onoffswitch-switch"></span>
						</label>
					</div>
				</div>
			</div>
			<div class="setings-item">
				<span> Top navbar </span>

				<div class="switch">
					<div class="onoffswitch">
						<input type="checkbox" name="fixednavbar"
							class="onoffswitch-checkbox" id="fixednavbar"> <label
							class="onoffswitch-label" for="fixednavbar"> <span
							class="onoffswitch-inner"></span> <span
							class="onoffswitch-switch"></span>
						</label>
					</div>
				</div>
			</div>
			<div class="setings-item">
				<span> Boxed layout </span>

				<div class="switch">
					<div class="onoffswitch">
						<input type="checkbox" name="boxedlayout"
							class="onoffswitch-checkbox" id="boxedlayout"> <label
							class="onoffswitch-label" for="boxedlayout"> <span
							class="onoffswitch-inner"></span> <span
							class="onoffswitch-switch"></span>
						</label>
					</div>
				</div>
			</div>
			<div class="setings-item">
				<span> Fixed footer </span>

				<div class="switch">
					<div class="onoffswitch">
						<input type="checkbox" name="fixedfooter"
							class="onoffswitch-checkbox" id="fixedfooter"> <label
							class="onoffswitch-label" for="fixedfooter"> <span
							class="onoffswitch-inner"></span> <span
							class="onoffswitch-switch"></span>
						</label>
					</div>
				</div>
			</div>

			<div class="title">Skins</div>
			<div class="setings-item default-skin">
				<span class="skin-name "> <a class="s-skin-0"> Default </a>
				</span>
			</div>
			<div class="setings-item blue-skin">
				<span class="skin-name "> <a class="s-skin-1"> Blue light
				</a>
				</span>
			</div>
			<div class="setings-item yellow-skin">
				<span class="skin-name "> <a class="s-skin-3">
						Yellow/Purple </a>
				</span>
			</div>
		</div>
	</div>
</div>
<script>
	$("#fixednavbar").click(
			function() {
				if ($("#fixednavbar").is(":checked")) {
					$(".navbar-static-top").removeClass("navbar-static-top")
							.addClass("navbar-fixed-top");
					$("body").removeClass("boxed-layout");
					$("body").addClass("fixed-nav");
					$("#boxedlayout").prop("checked", false);
				} else {
					$(".navbar-fixed-top").removeClass("navbar-fixed-top")
							.addClass("navbar-static-top");
					$("body").removeClass("fixed-nav");
				}
			});

	$("#fixedsidebar").click(function() {
		if ($("#fixedsidebar").is(":checked")) {
			$("body").addClass("fixed-sidebar");
			$(".sidebar-collapse").slimScroll({
				height : "100%",
				railOpacity : 0.9
			});
		} else {
			$(".sidebar-collapse").slimscroll({
				destroy : true
			});
			$(".sidebar-collapse").attr("style", "");
			$("body").removeClass("fixed-sidebar");
		}
	});

	$("#collapsemenu").click(function() {
		if ($("#collapsemenu").is(":checked")) {
			$("body").addClass("mini-navbar");
			SmoothlyMenu();
		} else {
			$("body").removeClass("mini-navbar");
			SmoothlyMenu();
		}
	});

	$("#boxedlayout").click(function() {
		if ($("#boxedlayout").is(":checked")) {
			$("body").addClass("boxed-layout");
			$("#fixednavbar").prop("checked", false);
			$(".navbar-fixed-top").removeClass("navbar-fixed-top")
					.addClass("navbar-static-top");
			$("body").removeClass("fixed-nav");
			$(".footer").removeClass("fixed");
			$("#fixedfooter").prop("checked", false);
		} else {
			$("body").removeClass("boxed-layout");
		}
	});

	$("#fixedfooter").click(function() {
		if ($("#fixedfooter").is(":checked")) {
			$("#boxedlayout").prop("checked", false);
			$("body").removeClass("boxed-layout");
			$(".footer").addClass("fixed");
		} else {
			$(".footer").removeClass("fixed");
		}
	});

	$(".spin-icon").click(function() {
		$(".theme-config-box").toggleClass("show");
	});

	$(".s-skin-0").click(function() {
		$("body").removeClass("skin-1");
		$("body").removeClass("skin-2");
		$("body").removeClass("skin-3");
	});

	$(".s-skin-1").click(function() {
		$("body").removeClass("skin-2");
		$("body").removeClass("skin-3");
		$("body").addClass("skin-1");
	});

	$(".s-skin-2").click(function() {
		$("body").removeClass("skin-1");
		$("body").removeClass("skin-3");
		$("body").addClass("skin-2");
	});

	$(".s-skin-3").click(function() {
		$("body").removeClass("skin-1");
		$("body").removeClass("skin-2");
		$("body").addClass("skin-3");
	});

	function SmoothlyMenu() {
		if (!$("body").hasClass("mini-navbar")
				|| $("body").hasClass("body-small")) {
			$("#side-menu").hide();
			setTimeout(function() {
				$("#side-menu").fadeIn(500);
			}, 100);
		} else if ($("body").hasClass("fixed-sidebar")) {
			$("#side-menu").hide();
			setTimeout(function() {
				$("#side-menu").fadeIn(500);
			}, 300);
		} else {
			$("#side-menu").removeAttr("style");
		}
	}
</script>